<template>
  <div class="vm-businessTransaction-container">
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <vm-common-search-view></vm-common-search-view>
    <tab
      bar-active-color="#d9271b"
      active-color="#d9271a"
      :line-width="2">
      <tab-item selected @on-item-click="onItemClick">可参与需求交易</tab-item>
      <tab-item @on-item-click="onItemClick">已参与需求交易</tab-item>
    </tab>
    <!-- 可参与需求交易 -->
    <vm-business-participateIn v-if="toggleIndex == 0"></vm-business-participateIn>

    <!-- 已参与需求交易 -->
    <vm-business-involved  v-if="toggleIndex == 1"></vm-business-involved>
  </div>
</template>
<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import vmCommonSearchView from '@/components/vm-common-search-view.vue'
  import vmBusinessTransaction_ParticipateIn from '@/page/businessTransctionCenter/businessTransaction_Participate_In.vue'
  import vmBusinessInvolved from '@/page/businessTransctionCenter/business_involved.vue'
  import {Tab, TabItem} from 'vux'

  export default {
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        toggleIndex: 0
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-common-search-view': vmCommonSearchView,
      'vm-business-participateIn': vmBusinessTransaction_ParticipateIn,
      'vm-business-involved': vmBusinessInvolved,
      Tab,
      TabItem
    },
    created() {},
    methods: {
      onItemClick (index){
        this.toggleIndex = index;
      }
    }
  }
</script>

<style lang="scss">
.vm-businessTransaction-container {
  .vux-tab-wrap {
    height: 77px !important;
    padding: 0;
    .vux-tab-container{
      height: 77px !important;
      .vux-tab {
        height: 77px !important;
        .vux-tab-item {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28px;
        }
      }
    }
  }
}
</style>
